<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="java.text.NumberFormat,java.text.DecimalFormat,java.util.List,java.util.Date,com.padgett.resourcemanagement.util.DateUtil,com.google.appengine.api.datastore.Entity,com.google.appengine.api.datastore.KeyFactory" %>
<!DOCTYPE HTML>
<html>
<head>
<%
String accountant=(String)request.getAttribute("accountant");
String clientId=null;
String clientName=null;
String invoiceId=(String)request.getAttribute("invoiceId");
String invoiceLineItemId=(String)request.getAttribute("invoiceLineItemId");
Entity client=((Entity)(request.getAttribute("client")));
clientId=KeyFactory.keyToString(client.getKey());
clientName=(((String)(client.getProperty("Type"))).equalsIgnoreCase("business")?((String)client.getProperty("LegalName")):(((String)client.getProperty("Name"))));
double totalAmount=(Double)request.getAttribute("TotalAmount");
double owing=(Double)request.getAttribute("owing");
double paid=(Double)request.getAttribute("paid");
DecimalFormat df=new DecimalFormat("###,###,###.00");
NumberFormat nf=NumberFormat.getCurrencyInstance();
%>
<title>Client - <%=clientName %></title>
<%@include file="/WEB-INF/css.jsp" %>
<%@include file="/WEB-INF/javascript.jsp" %>
<script>
$(document).ready(function(){
//Initialize all components.
var taxable=$('#LineItemForm #Taxable').button().click(function(){
	var taxableLabel=$('#LineItemForm #TaxableLabel');
	if($(this).attr('checked')!=undefined){
		$(this).button('option','label','Yes');
	}else{
		$(this).button('option','label','No');
	}
});
var type=$('#InvoiceForm #TypeContainer').buttonset();
var invoicePaymentMethod=$('#PayInvoiceForm #PaymentMethodContainer').buttonset();
var billable=$('#ServiceForm #BillableContainer').buttonset();
var editLineItem=$('#Item :input[name=EditLineItemButton]').button().click(function(){
	// Edit Line Item
	$('#LineItemForm #invoiceLineItemId').val($(this).attr('id'));
	$('#ItemDialog').dialog('open');
});
var deleteLineItem=$('#Item :input[name=DeleteLineItemButton]').button().click(function(){
	$('#DeleteInvoiceLineItemDialog #InvoiceLineItemId').val($(this).attr('id'));
	$('#DeleteInvoiceLineItemDialog').dialog('open');
});
var issuedDate=$('#InvoiceForm #IssuedDate').datepicker({dateFormat:'MM dd, yy'});
var payInvoiceDate=$('#PayInvoiceForm #PaidDate').datepicker({dateFormat:'MM dd, yy'}).datepicker('setDate',new Date());
<%
if(totalAmount==0||totalAmount>0&&owing>0){
%>
// Initialize all Dialogs and hide them.
$('#EditInvoiceDialog').dialog({
	title:'Edit Invoice',
	resizable:false,
	autoOpen:false,
	height:440,
	width:800,
	modal:true,
	buttons:{
		"Save":function(){
			var hasError=false;
			// Validation on required fields.
			$('#InvoiceForm .RequiredField').each(function(){
				var field=$('#InvoiceForm #'+$(this).attr('for'));
				$('#InvoiceForm #'+field.attr('id')+'Message').empty();
				if(field.attr('id')=='AccountantContainer'){
					if($('#InvoiceForm #AccountantContainer :radio:checked').val()===undefined){
						hasError=true;
						$('#InvoiceForm #'+field.attr('id')+'Message').append('Required');
					}
				}else{
					var value=field.val();
					if(value===undefined||value==''){
						$('#InvoiceForm #'+field.attr('id')+'Message').append('Required');
						hasError=true;
					}else{
						$('#InvoiceForm #'+field.attr('id')+'Message').empty();
					}
				}
			});
			if(!hasError){
				$.ajax({
					url:"/AjaxSaveInvoice",
					type:"POST",
					dataType:"json",
					data:{
						"invoiceId":'<%=invoiceId%>',
						"InvoiceNumber":$('#InvoiceForm #InvoiceNumber').val(),
						"IssuedDate":($('#InvoiceForm #IssuedDate').datepicker('getDate')!=undefined?$('#InvoiceForm #IssuedDate').datepicker('getDate').getTime():''),
						"Accountant":$('#InvoiceForm #AccountantContainer :radio:checked').val(),
						"Note":($('#InvoiceForm #Note').val())
					},
					success:function(data,status,xhr){
						window.location.href='/GetInvoice?invoiceId=<%=invoiceId%>&clientId=<%=clientId %>&clientName=<%=clientName%>';
					},
					error:function(xhr,status,error){
						alert("error:"+error);
					}
				});
			}
		},
		Cancel:function(){
			$(this).dialog("close");
		}
	},
	open:function(){
		// If ID field is empty, then set all defaults.  If not, set all values.
		if($('#invoiceId').val()!=undefined){
			// Get all users
			$.ajax({
				url:'/AjaxGetUsers',
				type:'GET',
				dataType:'json',
				success:function(data,status,xhr){
					var accountantContainer=$('#InvoiceForm #AccountantContainer').empty();
					var users=data.data;
					var currentUserId='<%=((String)request.getAttribute("CurrentUserId"))%>';
					for(var i=0;i<users.length;i++){
						if(users[i].UserId==currentUserId){
							accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'" checked="checked"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
						}else{
							accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
						}
					}
					accountantContainer.buttonset();
				},
				error:function(xhr,status,error){
					alert('Error:'+error);
				}
			});	
			// Retrieve client info.
			$.ajax({
				url:'/AjaxGetInvoice',
				type:'GET',
				dataType:'json',
				data:{
					invoiceId:$('#invoiceId').val()
				},
				success:function(data,status,xhr){
					if(data.success==true){
						var obj=data.data;
						$('#InvoiceForm :input:text').each(function(index,element){
							$(this).val(obj[$(this).attr('name')]);
						});
						$('#InvoiceForm :input:radio').each(function(index,element){
							if(obj[$(this).attr('name')]==$(this).attr('id')){
								$(this).attr('checked','checked').button('refresh');
							}
						});
						$('#InvoiceForm :input:checkbox').each(function(index,element){
							if(obj[$(this).attr('name')]!=undefined){
								if(obj[$(this).attr('name')]=='true'){
									$(this).attr('checked','checked').button('refresh');
								}else{
									$(this).removeAttr('checked').button('refresh');
								}
							}
						});
						$('#InvoiceForm #Note').append((obj.Note!=undefined?obj.Note:''));
					}else{
						alert('Error:'+data.error);
					}
				},
				error:function(xhr,status,error){
					alert('Error:'+error);
				}
			});
		}else{
			// Get all users
			$.ajax({
				url:'/AjaxGetUsers',
				type:'GET',
				dataType:'json',
				success:function(data,status,xhr){
					var accountantContainer=$('#InvoiceForm #AccountantContainer').empty();
					var users=data.data;
					var currentUserId='<%=((String)request.getAttribute("CurrentUserId"))%>';
					for(var i=0;i<users.length;i++){
						if(users[i].UserId==currentUserId){
							accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'" checked="checked"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
						}else{
							accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
						}
					}
					accountantContainer.buttonset();
				},
				error:function(xhr,status,error){
					alert('Error:'+error);
				}
			});	
		}
	},
	close:function(){
		// Clear all fields and reset defaults for radios.
		$('#InvoiceForm :input[type="text"],textarea').val('');
	}
});
<%}%>
<%
if(totalAmount==0||totalAmount>0&&owing>0){
%>
// Add item dialog
$('#ItemDialog').dialog({
	title:'Line Item',
	resizable:false,
	autoOpen:false,
	height:440,
	width:800,
	modal:true,
	buttons:{
		"Save":function(){
			// Do validation before submitting
			var valid=true;
			if($('#LineItemForm :checked[name="LineItemService"]').attr('id')==undefined){
				alert('Please select a service.');
				valid=false;
			}
			
			if(valid){
				$.ajax({
					url:"/AjaxSaveInvoiceLineItem",
					type:"POST",
					dataType:"json",
					data:{
						"invoiceId":'<%=invoiceId%>',
						"invoiceLineItemId":$('#LineItemForm #invoiceLineItemId').val(),
						"serviceId":$('#LineItemForm :checked[name="LineItemService"]').attr('id'),
						"Amount":$('#LineItemForm #Amount').val(),
						"Taxable":($('#LineItemForm #Taxable').attr('checked')=='checked'?true:false),
						"Description":($('#LineItemForm #Description').val())
					},
					success:function(data,status,xhr){
						window.location.href='/GetInvoice?invoiceId=<%=invoiceId%>&clientId=<%=clientId %>&clientName=<%=clientName%>';
					},
					error:function(xhr,status,error){
						alert("error:"+error);
					}
				});
			}
		},
		Cancel:function(){
			$(this).dialog("close");
		}
	},
	open:function(){
		// If ID field is empty, then set all defaults.  If not, set all values.
		if($('#LineItemForm #invoiceLineItemId').val()!=null&&$('#LineItemForm #invoiceLineItemId').val()!=undefined&&$('#LineItemForm #invoiceLineItemId').val()!=''){
			$.ajax({
				url:'/AjaxGetClientCompletedUnbilledServices',
				type:'GET',
				dataType:'json',
				data:{
					"clientId":'<%=clientId %>'
				},
				success:function(data,status,xhr){
					if(data.success==true){
						var serviceList=$('#LineItemForm #ServiceList').empty();
						var services=data.data;
						if(services.length>0){
							for(var i=0;i<services.length;i++){
								serviceList.append('<div style="width:90%;float:left;"><input id="'+services[i].serviceId+'" name="LineItemService" type="radio" value="'+services[i].Fee+'"/><label for="'+services[i].serviceId+'">'+services[i].Type+'  $'+services[i].Fee+'  '+services[i].DueDate+'</label></div>');
							}
							$('#LineItemForm #ServiceList :input[name=LineItemService]').change(function(){
								$('#LineItemForm #Amount').val($(this).val());
							})
							// Get Invoice Line Item Details.
							$.ajax({
								url:'/AjaxGetInvoiceLineItem',
								type:'GET',
								dataType:'json',
								data:{
									invoiceLineItemId:$('#LineItemForm #invoiceLineItemId').val()
								},
								success:function(data,status,xhr){
									if(data.success==true){
										var item=data.data;
										$('#LineItemForm #'+item.Service).attr('checked','checked');
										$('#LineItemForm :input:text').each(function(index,element){
											$(this).val(item[$(this).attr('name')]);
										});
										$('#LineItemForm :input:radio').each(function(index,element){
											if(item[$(this).attr('name')]==$(this).attr('id')){
												$(this).attr('checked','checked').button('refresh');
											}
										});
										$('#LineItemForm :input:checkbox').each(function(index,element){
											if(item[$(this).attr('name')]!=undefined){
												if(item[$(this).attr('name')]==true){
													$(this).attr('checked','checked').button('option','label','Yes').button('refresh');
												}else{
													$(this).removeAttr('checked').button('option','label','No').button('refresh');
												}
											}
										});
										$('#LineItemForm #Description').append((item.Description!=undefined?item.Description:''));
									}else{
										alert('Error:'+data.error);
									}
								},
								error:function(xhr,status,error){
									alert('Error:'+error);
								}
							});
						}else{
							var serviceList=$('#LineItemForm #ServiceList').empty();
							// Get Invoice Line Item Details.
							$.ajax({
								url:'/AjaxGetInvoiceLineItem',
								type:'GET',
								dataType:'json',
								data:{
									invoiceLineItemId:$('#LineItemForm #invoiceLineItemId').val()
								},
								success:function(data,status,xhr){
									if(data.success==true){
										var item=data.data;
										$.ajax({
											url:'/AjaxGetService',
											type:'GET',
											dataType:'json',
											data:{
												serviceId:item.Service
											},
											success:function(data,status,xhr){
												serviceList.append('<div style="width:90%;float:left;"><input id="'+item.Service+'" name="LineItemService" type="radio" value="'+data.data.Fee+'"/><label for="'+item.Service+'">'+data.data.Type+'  $'+data.data.Fee+'  '+data.data.DueDate+'</label></div>');
												$('#LineItemForm #'+item.Service).attr('checked','checked');
												$('#LineItemForm :input:text').each(function(index,element){
													$(this).val(item[$(this).attr('name')]);
												});
												$('#LineItemForm :input:radio').each(function(index,element){
													if(item[$(this).attr('name')]==$(this).attr('id')){
														$(this).attr('checked','checked').button('refresh');
													}
												});
												$('#LineItemForm :input:checkbox').each(function(index,element){
													if(item[$(this).attr('name')]!=undefined){
														if(item[$(this).attr('name')]==true){
															$(this).attr('checked','checked').button('option','label','Yes').button('refresh');
														}else{
															$(this).removeAttr('checked').button('option','label','No').button('refresh');
														}
													}
												});
												$('#LineItemForm #Description').val((item.Description!=undefined?item.Description:''));
											},
											error:function(xhr,status,error){
												alert('Error:'+error);
											}
										});
									}else{
										alert('Error:'+data.error);
									}
								},
								error:function(xhr,status,error){
									alert('Error:'+error);
								}
							});
						}
					}else{
						alert('Error:'+data.error);
					}
				},
				error:function(xhr,status,error){
					alert('Error:'+error);
				}
			});
		}else{
			$.ajax({
			url:'/AjaxGetClientCompletedUnbilledServices',
			type:'GET',
			dataType:'json',
			data:{
				"clientId":'<%=clientId %>'
			},
			success:function(data,status,xhr){
				if(data.success==true){
					var serviceList=$('#LineItemForm #ServiceList').empty();
					var services=data.data;
					for(var i=0;i<services.length;i++){
						serviceList.append('<div style="width:90%;float:left;"><input id="'+services[i].serviceId+'" name="LineItemService" type="radio" value="'+services[i].Fee+'"/><label for="'+services[i].serviceId+'">'+services[i].Type+'  $'+services[i].Fee+'  '+services[i].DueDate+'</label></div>');
					}
					$('#LineItemForm #ServiceList :input[name=LineItemService]').change(function(){
						$('#LineItemForm #Amount').val($(this).val());
					})
				}else{
					alert('Error:'+data.error);
				}
			},
			error:function(xhr,status,error){
				alert('Error:'+error);
			}
		});
		}
	},
	close:function(){
		// Clear all fields and reset defaults for radios.
		$('#LineItemForm :input[type="text"],textarea').val('');
	}
});
<%}%>
$('#DeleteInvoiceLineItemDialog').dialog({
	resizable:false,
	autoOpen:false,
	height:240,
	width:800,
	modal:true,
	buttons:{
		"Delete":function(){
			$.ajax({
				url:"/AjaxDeleteInvoiceLineItem",
				type:"POST",
				dataType:"json",
				data:{
					invoiceLineItemId:$('#DeleteInvoiceLineItemDialog #InvoiceLineItemId').val()
				},
				success:function(data,status,xhr){
					window.location.href='/GetInvoice?invoiceId=<%=invoiceId%>&clientId=<%=clientId %>&clientName=<%=clientName%>';
				},
				error:function(xhr,status,error){
					alert("error:"+error);
				}
			});
		},
		Cancel:function(){
			$(this).dialog("close");
		}
	}
});
$('#DeleteInvoiceDialog').dialog({
	resizable:false,
	autoOpen:false,
	height:240,
	width:800,
	modal:true,
	buttons:{
		"Delete":function(){
			$.ajax({
				url:"/AjaxDeleteInvoice",
				type:"POST",
				dataType:"json",
				data:{
					invoiceId:'<%=invoiceId%>'
				},
				success:function(data,status,xhr){
					window.location.href='/invoices.jsp?clientId=<%=clientId %>&clientName=<%=clientName%>';
				},
				error:function(xhr,status,error){
					alert("error:"+error);
				}
			});
		},
		Cancel:function(){
			$(this).dialog("close");
		}
	}
});
<%
if(paid>0){
%>
$('#InvoiceReceiptsDialog').dialog({
	title:'Invoice Receipts',
	resizable:false,
	autoOpen:false,
	height:500,
	width:840,
	modal:true,
	buttons:{
		Cancel:function(){
			$(this).dialog('close');
		}
	},
	open:function(){
		// Get all invoice receipts
		$.ajax({
			url:"/AjaxGetInvoiceReceipts",
			type:"GET",
			dataType:"json",
			data:{
				invoiceId:'<%=invoiceId%>'
			},
			success:function(data,status,xhr){
				if(data.success==true){
					// Populate receipts dialog.
					var invoiceReceiptsContainer=$('#InvoiceReceiptsDialog #InvoiceReceiptsContainer');
					var receipts=data.data;
					for(var i=0;i<receipts.length;i++){
						invoiceReceiptsContainer.append('<div style="float:left;width:95%;border:1px solid black;font:normal 12px verdana,times,serif;padding:5px;margin:5px;">'+
						'<div style="float:left;width:33%;">Paid Date: '+receipts[i].PaidDate+'</div>'+
						'<div style="float:left;width:33%;">Amount: $'+receipts[i].Amount+'</div>'+
						'<div style="float:left;width:33%;">Method Of Payment: '+receipts[i].MethodOfPayment+'</div>'+
						'<div style="float:left;width:100%;">Payee: '+receipts[i].Payee+'</div>'+
						'<div style="float:left;width:100%;">Accountant: '+receipts[i].AccountantName+'</div>'+
						'<div style="float:left;width:100%;">Note: '+receipts[i].Note+'</div>'+
						'</div>');
					}
				}else{
					alert('Error:'+data.error);	
				}
			},
			error:function(xhr,status,error){
				alert("error:"+error);
			}
		});
	},
	close:function(){
		$('#InvoiceReceiptsDialog #InvoiceReceiptsContainer').empty();
	}
});
<%}%>
<%
if(owing>0){
%>
$('#PayInvoiceDialog').dialog({
	title:'Pay This Invoice',
	resizable:false,
	autoOpen:false,
	height:500,
	width:840,
	modal:true,
	buttons:{
		"Save":function(){
			var hasError=false;
			// Validation on required fields.
			$('#PayInvoiceForm .RequiredField').each(function(){
				var field=$('#PayInvoiceForm #'+$(this).attr('for'));
				$('#PayInvoiceForm #'+field.attr('id')+'Message').empty();
				if(field.attr('id')=='PaymentMethodContainer'){
					if($('#PayInvoiceForm #PaymentMethodContainer :radio:checked').val()===undefined){
						hasError=true;
						$('#PayInvoiceForm #'+field.attr('id')+'Message').append('Required');
					}
				}else if(field.attr('id')=='AccountantContainer'){
					if($('#PayInvoiceForm #AccountantContainer :radio:checked').val()===undefined){
						hasError=true;
						$('#PayInvoiceForm #'+field.attr('id')+'Message').append('Required');
					}
				}else{
					var value=field.val();
					if(value===undefined||value==''){
						$('#PayInvoiceForm #'+field.attr('id')+'Message').append('Required');
						hasError=true;
					}else{
						$('#PayInvoiceForm #'+field.attr('id')+'Message').empty();
					}
				}
			});
			if(!hasError){
				$.ajax({
					url:"/AjaxPayInvoice",
					type:"POST",
					dataType:"json",
					data:{
						invoiceId:'<%=invoiceId%>',
						Payee:$('#PayInvoiceForm #Payee').val(),
						PaidDate:($('#PayInvoiceForm #PaidDate').datepicker('getDate')!=undefined?$('#PayInvoiceForm #PaidDate').datepicker('getDate').getTime():''),
						MethodOfPayment:$('#PayInvoiceForm :checked[name="MethodOfPayment"]').val(),
						Amount:$('#PayInvoiceForm #Amount').val(),
						Accountant:$('#PayInvoiceForm #AccountantContainer :radio:checked').val(),
						Note:($('#PayInvoiceForm #Note').val())
					},
					success:function(data,status,xhr){
						if(data.success==true){
							window.location.href='/GetInvoice?invoiceId=<%=invoiceId%>&clientId=<%=clientId %>&clientName=<%=clientName%>';
						}else{
							alert('Error:'+data.error);	
						}
					},
					error:function(xhr,status,error){
						alert("error:"+error);
					}
				});
			}
		},
		Cancel:function(){
			// Clear all fields and reset defaults for radios.
			$(this).dialog('close');
		}
	},
	open:function(){
		// Get all users
		$.ajax({
			url:'/AjaxGetUsers',
			type:'GET',
			dataType:'json',
			success:function(data,status,xhr){
				var accountantContainer=$('#PayInvoiceForm #AccountantContainer').empty();
				var users=data.data;
				var currentUserId='<%=((String)request.getAttribute("CurrentUserId"))%>';
				for(var i=0;i<users.length;i++){
					if(users[i].UserId==currentUserId){
						accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'" checked="checked"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
					}else{
						accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
					}
				}
				accountantContainer.buttonset();
			},
			error:function(xhr,status,error){
				alert('Error:'+error);
			}
		});	
		// Refresh buttonset
		$('#PayInvoiceForm #PaymentMethodContainer').buttonset('refresh');
	},
	close:function(){
		$('#PayInvoiceForm :input[type="text"],textarea').val('');
	}
});
$('#PayInvoiceButton').button().click(function(){
	//TODO - Pay invoice
	$('#PayInvoiceDialog').dialog('open');
});
<%}%>
$('#DeleteInvoiceButton').button().click(function(){
	$('#DeleteInvoiceDialog').dialog("open");
});
$('#ClientInvoicesButton').button().click(function(){
	window.location.href='/invoices.jsp?clientId=<%=clientId %>&clientName=<%=clientName%>';
});
<%
if(totalAmount==0||totalAmount>0&&owing>0){
%>
$('#EditInvoiceButton').button().click(function(){
	$('#EditInvoiceDialog').dialog("open");
});
<%}%>
<%
if(totalAmount==0||totalAmount>0&&owing>0){
%>
$('#AddItemButton').button().click(function(){
	$('#ItemDialog').dialog('open');
});
<%}%>
<%
if(paid>0){
%>
$('#ViewInvoiceReceiptsButton').button().click(function(){
	$('#InvoiceReceiptsDialog').dialog('open');
});
<%}%>
});
</script>
</head>
<body>
<%@include file="/WEB-INF/clientnavigation.jsp" %>
<div class="Container" style="margin-bottom:10px;margin-top:-20px;">
	<h1>INVOICE DETAIL</h1>
<div id="ActionsContainer" style="float:left;width:100%;margin:0 0 10px 18px">
<button id="ClientInvoicesButton">Back To Invoices</button>
<%
if(totalAmount==0||totalAmount>0&&owing>0){
%>
<button id="EditInvoiceButton">Edit Invoice</button>
<div id="EditInvoiceDialog">
<form id="InvoiceForm">
<input id="invoiceId" name="invoiceId" type="hidden" value="<%=invoiceId %>"/>
<div style="width:100%">
<div style="width:20%;float:left;padding-bottom:5px;">Invoice No:</div><div style="width:80%;float:left;padding-bottom:5px;"><input id="InvoiceNumber" name="InvoiceNumber" type="text" size="10" maxlength="10"/></div>
<div style="width:20%;float:left;padding-bottom:5px;">Issued Date:</div><div style="width:80%;float:left;padding-bottom:5px;"><input id="IssuedDate" name="IssuedDate" type="text"/></div>
<div style="width:20%;float:left;padding-bottom:5px;"><label for="AccountantContainer" id="AccountantContainerLabel" class="RequiredField">Accountant:</label></div><div style="width:80%;float:left;padding-bottom:5px;"><div id="AccountantContainer" style="float:left;"></div><label id="AccountantContainerMessage" class="Message" for="AccountantContainer"></label></div>
<div style="width:20%;float:left;">Note:</div><div style="width:80%;float:left;"><textarea id="Note" name="Note" rows="5" cols="50"></textarea></div>
</div>
</form>
</div>
<button id="AddItemButton">Add Item</button>
<div id="ItemDialog">
<form id="LineItemForm">
<input id="invoiceLineItemId" name="invoiceLineItemId" type="hidden" value="<%=(invoiceLineItemId==null?"":invoiceLineItemId) %>"/>
<div id="ServiceList"></div>
<table style="padding:10px 5px 5px 5px;">
<tr>
<td><label id="AmountLabel" for="Amount" class="RequiredField">Amount:</label></td><td>$<input id="Amount" name="Amount" type="text" size="6" maxlength="10"/><label id="AmountMessage" class="Message" for="Amount"></label></td>
</tr>
<tr>
<td>Taxable:</td><td><input id="Taxable" name="Taxable" type="checkbox"/><label for="Taxable">No</label></td>
</tr>
<tr>
<td>Description:</td>
<td><textarea id="Description" name="Description" rows="5" cols="50"></textarea></td>
</tr>
</table>
</form>
</div>
<%}%>
<%
if(owing>0){
%>
<button id="PayInvoiceButton">Pay</button>
<div id="PayInvoiceDialog">
<form id="PayInvoiceForm">
<div style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="Payee" id="PayeeLabel" class="RequiredField">Payee:</label></div>
<div style="float:left;">
<input id="Payee" name="Payee" type="text" size="30" maxlength="100" value="<%=clientName%>"/><label id="PayeeMessage" class="Message" for="Payee"></label>
</div>
</div>
<div style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="PaidDate" id="PaidDateLabel" class="RequiredField">Date:</label></div>
<div style="float:left;">
<input id="PaidDate" name="PaidDate" type="text"/><label id="PaidDateMessage" class="Message" for="PaidDate"></label>
</div>
</div>
<div style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="Amount" id="AmountLabel" class="RequiredField">Amount:</label></div><div style="float:left;"><input id="Amount" name="Amount" type="text" size="6" maxlength="10" value="<%=request.getAttribute("owing")%>"/><label id="AmountMessage" class="Message" for="Amount"></label></div>
</div>
<div id="PaymentMethodContainer" style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="PaymentMethodContainer" id="PaymentMethodContainerLabel" class="RequiredField">Method Of Payment:</label></div>
<div style="float:left;">
<input id="Cash" name="MethodOfPayment" type="radio" value="Cash"/><label for="Cash">Cash</label>
<input id="Cheque" name="MethodOfPayment" type="radio" value="Cheque"/><label for="Cheque">Cheque</label>
<input id="Card" name="MethodOfPayment" type="radio" value="Card"/><label for="Card">Card</label>
<input id="FOC" name="MethodOfPayment" type="radio" value="FOC"/><label for="FOC">FOC</label>
<input id="BillCompany" name="MethodOfPayment" type="radio" value="Bill Company"/><label for="BillCompany">Bill Company</label>
</div><label id="PaymentMethodContainerMessage" class="Message" for="PaymentMethodContainer"></label>
</div>
<div style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="AccountantContainer" id="AccountantLabel" class="RequiredField">Accountant:</label></div>
<div style="float:left;">
<div id="AccountantContainer"></div><label id="AccountantContainerMessage" class="Message" for="AccountantContainer"></label>
</div>
</div>
<div id="NoteContainer" style="float:left;width:90%;padding:5px;">
<div style="float:left;width:30%"><label for="Note">Note:</label></div>
<div style="float:left;">
<textarea id="Note" name="Note" rows="3" cols="60"></textarea>
</div>
</div>
</form>
</div>
<%} %>
<%
if(paid>0){
%>
<button id="ViewInvoiceReceiptsButton">View Receipts</button>
<div id="InvoiceReceiptsDialog">
<div id="InvoiceReceiptsContainer">
</div>
</div>
<%}%>
<button id="DeleteInvoiceButton" style="margin-left:50px;">Delete</button><div id="DeleteInvoiceDialog" title="Delete Invoice">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This item will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
</div>
<div id="Invoice">
<div id="Heading" style="width:100%;float:left;margin-bottom:10px;">
<div id="CompanyLogo" style="width:60%;height:118px;float:left;padding:2px;margin:0px;"></div>
<div id="PadgettBusinessServices" style="height:90px;float:left;padding:2px;margin:px;">
<p style="font:bold 18px verdana,times,serif;padding:2px;margin:0px;">Padgett Business Services</p>
<p style="font:11px verdana,times,serif;padding:2px;margin:0px;">3190 Steeles Avenue East, Suite 302<br/>
Markham, Ontario L3R 1G9<br/>
Tel: (905) 948-1711<br/>
Fax: (905) 948-1408<br/></p>
</div>
</div>
<div id="Invoice" style="width:100%;text-align:center;padding:10px;margin:10px;">INVOICE</div>
<div id="Info" style="width:100%;height:90px;padding:0px;margin:0px;">
<div id="BillTo" style="width:60%;height:100%;float:left;padding:0px;margin:0px;">
<div id="ClientName" style="font:bold 12px verdana,times,serif;padding:5px;"><%=client.getProperty("Name") %> - <%=client.getProperty("ClientNumber") %></div>
<div id="Address" style="font:12px verdana,times,serif;padding:5px;"><%=(client.getProperty("Address")!=null?client.getProperty("Address"):"") %></div>
</div>
<div id="InvoiceSummary" style="width:39%;height:100%;float:left;padding:0px;margin:0px;">
<div id="InvoiceNumberLabel" style="font:12px verdana,times,serif;width:40%;float:left;padding:5px;">Invoice No.:</div><div id="InvoiceNumberPrint" style="font:12px verdana,times,serif;float:left;padding:5px;"><%=request.getAttribute("InvoiceNumber") %></div>
<div style="clear:both;"><div id="IssuedDateLabel" style="font:12px verdana,times,serif;width:40%;float:left;position:relative;padding:5px;">Issued Date:</div><div id="IssuedDatePrint" style="font:12px verdana,times,serif;padding:5px;float:left;position:relative;"><%=(DateUtil.formatDate((Date)request.getAttribute("IssuedDate"), DateUtil.LONG_DATE_FORMAT)) %></div></div>
<div style="clear:both;"><div id="AccountantLabel" style="font:12px verdana,times,serif;width:40%;float:left;position:relative;padding:5px;">Accountant:</div><div id="AccountantPrint" style="font:12px verdana,times,serif;float:left;padding:5px;"><%=(request.getAttribute("AccountantName")!=null?request.getAttribute("AccountantName"):"") %></div></div>
</div>
</div>
<div id="BusinessInfo" style="width:100%;float:left;padding:0px;margin:0px;">
<div id="BusinessNumber" style="width:58%;float:left;position:relative;padding:5px;font:12px verdana,times,serif;">Business No.:&nbsp;&nbsp;863873790RT0001</div>
<div id="DueOnPresentation" style="float:left;position:relative;padding:5px;font:bold 14px verdana,times,serif;">DUE ON PRESENTATION</div>
</div>
<div id="InvoiceItemsHeading" style="width:100%;float:left;padding:0px;margin:0px;">
<div id="DeleteInvoiceLineItemDialog" title="Delete Invoice Line Item">
<input id="InvoiceLineItemId" name="InvoiceLineItemId" type="hidden"/>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This item will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<div style="float:left;width:10%;height:20px;font:12px verdana,times,serif;border:1px solid black;text-align:center;">Item</div><div style="text-align:center;border:1px solid black;float:left;width:65%;height:20px;font:12px verdana,times,serif;">Description</div><div style="float:left;width:10%;height:20px;font:12px verdana,times,serif;border:1px solid black;text-align:center;">Tax</div><div style="text-align:center;float:left;width:14%;height:20px;font:12px verdana,times,serif;border:1px solid black;">Amount</div>
<div id="Item" style="float:left;width:10%;height:550px;font:12px verdana,times,serif;border:1px solid black;text-align:center;">
<%
List<Entity> invoiceLineItems=(List<Entity>)(request.getAttribute("InvoiceLineItems"));
if(invoiceLineItems!=null){
for(int i=0;i<invoiceLineItems.size();i++){
	if(invoiceLineItems.get(i).getProperty("Taxable")==Boolean.FALSE){
		out.print("<div style='float:left;text-align:left;width:95%;height:20px;padding:10px 5px 10px 5px;margin:5px'><input id='"+KeyFactory.keyToString(invoiceLineItems.get(i).getKey())+"' name='DeleteLineItemButton' type='button' value='Delete'/><input id='"+KeyFactory.keyToString(invoiceLineItems.get(i).getKey())+"' name='EditLineItemButton' type='button' value='"+(i+1)+"'/></div>");
	}else{
		out.print("<div style='float:left;text-align:left;width:95%;height:40px;padding:10px 5px 10px 5px;margin:5px'><input id='"+KeyFactory.keyToString(invoiceLineItems.get(i).getKey())+"' name='DeleteLineItemButton' type='button' value='Delete'/><input id='"+KeyFactory.keyToString(invoiceLineItems.get(i).getKey())+"' name='EditLineItemButton' type='button' value='"+(i+1)+"'/></div>");
	}
	
}
}
%>
</div>
<div id="Description" style="text-align:center;border:1px solid black;float:left;width:65%;height:550px;font:12px verdana,times,serif;">
<%
if(invoiceLineItems!=null){
for(int i=0;i<invoiceLineItems.size();i++){
	if(invoiceLineItems.get(i).getProperty("Taxable")==Boolean.FALSE){
		out.print("<div style='float:left;text-align:left;width:95%;height:20px;padding:10px 5px 10px 5px;margin:5px'>Services rendered for month of "+invoiceLineItems.get(i).getProperty("ServiceRendered")+"</div>");
	}else{
		out.print("<div style='float:left;text-align:left;width:95%;height:40px;padding:10px 5px 10px 5px;margin:5px'>Services rendered for month of "+invoiceLineItems.get(i).getProperty("ServiceRendered")+"<br/><br/>H - HST 13%<br/>HST</div>");
	}
}
}
%>
</div>
<div id="Tax" style="float:left;width:10%;height:550px;font:12px verdana,times,serif;border:1px solid black;text-align:center;">
<%
if(invoiceLineItems!=null){
for(int i=0;i<invoiceLineItems.size();i++){
	if(invoiceLineItems.get(i).getProperty("Taxable")==Boolean.FALSE){
		out.print("<div style='float:left;text-align:left;width:95%;height:20px;padding:10px 5px 10px 5px;margin:5px'></div>");
	}else{
		out.print("<div style='float:left;text-align:left;width:95%;height:40px;padding:10px 5px 10px 5px;margin:5px'>H</div>");
	}
}
}
%>
</div>
<div id="Amount" style="text-align:center;float:left;width:14%;height:550px;font:12px verdana,times,serif;border:1px solid black;">
<%
if(invoiceLineItems!=null){
for(int i=0;i<invoiceLineItems.size();i++){
	if(invoiceLineItems.get(i).getProperty("Taxable")==Boolean.FALSE){
		out.print("<div style='float:left;text-align:right;width:90%;height:20px;padding:10px 5px 10px 5px;margin:5px'>"+nf.format(invoiceLineItems.get(i).getProperty("Amount"))+"</div>");
	}else{
		out.print("<div style='float:left;text-align:right;width:90%;height:40px;padding:10px 5px 10px 5px;margin:5px'>"+nf.format(invoiceLineItems.get(i).getProperty("Amount"))+"<br/><br/>"+(invoiceLineItems.get(i).getProperty("Tax")!=null?df.format(invoiceLineItems.get(i).getProperty("Tax")):"")+"</div>");
	}
}
}
%>
</div>
</div>
<div id="InvoiceFooter" style="width:100%;float:left;padding:10px 0px 0px 0px;margin:0px;">
<div id="InvoiceNote" style="width:70%;height:80px;float:left;border:1px solid black;padding:5px;"><%=(request.getAttribute("Note")==null?"":request.getAttribute("Note")) %></div>
<div style="float:left;position:relative;width:29%;">
<div id="InoviceAmount" style="height:80px;float:left;width:100%;">
<div id="InvoiceAmountLabel" style="width:50%;float:left;text-align:right;padding-top:10px;margin:0px;">Total Amount:</div>
<div id="InvoiceTotalAmountPrint" style="width:49%;float:left;text-align:right;padding-top:10px;margin:0px;"><%=(request.getAttribute("TotalAmount")==null?"$0":(nf.format(((Double)request.getAttribute("TotalAmount"))))) %></div>
<div id="InvoiceAmountLabel" style="width:50%;float:left;text-align:right;padding-top:10px;margin:0px;">Paid Amount:</div>
<div id="InvoiceTotalAmountPrint" style="width:49%;float:left;text-align:right;padding-top:10px;margin:0px;"><%=(request.getAttribute("paid")==null?"$0":(nf.format(((Double)request.getAttribute("paid"))))) %></div>
<div id="InvoiceAmountLabel" style="width:50%;float:left;text-align:right;padding-top:10px;margin:0px;">Owing Amount:</div>
<div id="InvoiceTotalAmountPrint" style="width:49%;float:left;text-align:right;padding-top:10px;margin:0px;"><%=(request.getAttribute("owing")==null?"$0":(nf.format(((Double)request.getAttribute("owing"))))) %></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>